<script setup>

   import {ref,reactive} from 'vue'

   /**
    * 
    * 1.准备数据
    * 2.准备页面  
    *     npm install bootstrap
    *     main.js -> import 'bootstrap/dist/css/bootstrap.css'
    *     table
    * 3.页面展示功能
    * 4.计算总金额
    * 5.修改单条的数量
    *   直接点击时间修改item.number
    *   - + 判断  : disabled = "true "
    * 6.删除单表
    * 7.清空购物车
    * 8.空判定显示
    */

   let cartData = ref([
    {name:"可口可乐", price:3.5, number:4, stock:20,img:"https://t15.baidu.com/it/u=67272893,2747006368&fm=224&app=112&size=h200&n=0&f=JPEG&fmt=auto?sec=1731776400&t=c2e0a2e9970acc34a8dd69c65e2ad372"},
    {name:"卫龙辣条", price:3, number:10, stock:30,img:"https://gimg3.baidu.com/topone/src=https%3A%2F%2Fbkimg.cdn.bcebos.com%2Fsmart%2Faec379310a55b319ceff789d44a98226cefc17d7-bkimg-process%2Cv_1%2Crw_1%2Crh_1%2Cmaxl_800%2Cpad_1%3Fx-bce-process%3Dimage%2Fresize%2Cm_pad%2Cw_348%2Ch_348%2Ccolor_ffffff&refer=http%3A%2F%2Fwww.baidu.com&app=2011&size=f200,200&n=0&g=0n&er=404&q=75&fmt=auto&maxorilen2heic=2000000?sec=1731776400&t=bd7de0aad0f64d1c7dcb86684e349781"},
    {name:"飞天老窖", price:58, number:6, stock:20,img:"https://t14.baidu.com/it/u=178360000,2053298409&fm=224&app=112&size=h200&n=0&f=JPEG&fmt=auto?sec=1731776400&t=ad3015411b566054ee6ab6dcbf09a0b2"},
    {name:"沟帮子熏鸡", price:109, number:2, stock:10,img:"https://paimgcdn.baidu.com/724FDC7F40FC9B95?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F15960455780.jpg&rz=urar_2_968_600&v=0"},
    {name:"篮球", price:193, number:1, stock:8,img:"https://paimgcdn.baidu.com/152E1C4F98F5E9AA?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F14611056281.jpg&rz=urar_2_968_600&v=0"}
   ]);

   let calCount = ()=>{
      let count = 0 ;
      for(let index in cartData.value ){
        count += cartData.value[index].number * cartData.value[index].price;
      }
      return count;
   }





    
</script>

<template>
    <div>
        <table class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <td>序号</td>
                    <td>名称</td>
                    <td>图片</td>
                    <td>价格</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody v-if="cartData.length > 0">
                <tr v-for="(item,index) in cartData">
                    <td>{{ index }}</td>
                    <td>{{ item.name }}</td>
                    <td> <img width="80px" height="64px" :src="item.img" alt=""> </td>
                    <td> {{ item.price }} 元 </td>
                    <td><button :disabled="item.number == 1" class="btn btn-info btn-sm" @click="item.number--">-</button>&nbsp; 
                        {{ item.number }} &nbsp;
                        <button :disabled="item.number == item.stock" class="btn btn-info btn-sm" @click="item.number++">+</button></td>
                    <td>{{ item.price * item.number }} 元</td>
                    <td> <button class="btn btn-danger btn-sm" @click="cartData.splice(index,1)">删除</button></td>
                </tr>
            </tbody>

            <tbody v-else>
                <tr>
                    <td colspan="7">购物车空空如也!你是不是穷啊!!!</td>
                </tr>
            </tbody>

        </table>
        <span class="pull-right"> 总金额: {{ calCount() }} 元 </span>
        <button class="btn btn-danger btn-sm" @click="cartData=[]">清空购物车</button>
    </div>
</template>

<style scoped>
</style>
